import React, { useMemo } from 'react';
import i18n from "i18n-js";
import Taro from "@tarojs/taro";
import { View, Text } from '@tarojs/components';
import Steps from '@/components/steps';
import FlexScrollView from '@/components/FlexScrollView';
import { DynamicColors, GStyleSheet, GDynamicValue } from "@/utils/DarkMode";
import productI18n from '@/language/productI18n';
import { networkConfigTypes } from '@/config/product';
import configWifiModel from '../models/configWifi';
import { IBaseConfigNetworkProps } from '../models/base/baseConfigNetwork';
import { needShowReset } from '../models/configTool';


interface IProps {
  model: IBaseConfigNetworkProps,
}

const dstyles = GStyleSheet.create({
  tip: {
    color: DynamicColors.networkColor,
    textDecorationLine: 'underline'
  },
  tipBox: {
    fontSize: 13,
    color: new GDynamicValue('#333', '#999'),
  }
});

const subStyles = GStyleSheet.create({
  tipsItemSubTitle: {
    display: 'flex',
    flexDirection: 'column',
  },
  wifiName: {
    // textDecorationLine: 'underline',
    color: DynamicColors.networkColor,
    fontSize: 14,
  },
});

const SubTitle = ({ productConfig, name }) => {
  const styles = subStyles.useDynamicStyle();
  return (
    <View style={{ ...styles.tipsItemSubTitle }}>
      <Text style={styles.wifiName}>
        {i18n.t('WIFI_NAME')}
        ：
        <Text style={{ textDecorationLine: 'underline' }}>
          {name}
        </Text>
      </Text>
      <Text style={styles.wifiName}>
        {productConfig.softAPPassword
          ? [
            <Text key='1'>
              {i18n.t('WIFI_PASSWORD')}
              ：
            </Text>,
            <Text key='2' style={{ textDecorationLine: 'underline' }}>
              {productConfig.softAPPassword}
            </Text>,
          ]
          : ''}
      </Text>
    </View>
  );
};

const Tips: React.FC<IProps> = React.memo(
  ({ model }) => {
    const styles = dstyles.useDynamicStyle();

    const resetTips = useMemo(() => {
      const show = needShowReset(model);
      return show ? <Text style={styles.tip} onClick={() => {
        Taro.navigateTo({ url: '/pages/configDevice/resetTip/index' })
        configWifiModel.updateConfigModel(model);
      }}
      >
        {i18n.t('NO_SEEN_ENTERING_NETWORK')}
      </Text> : null;
    }, [model, styles])

    const getTips = useMemo(() => {
      let configData = model.configTips;
      const tips: any[] = [];
      if (!configData || !configData.content || configData.content.length === 0) {
        // default
        if (model.type === networkConfigTypes.TNetworkConfigTypeSoftAp) {
          tips.push(
            ...[
              {
                tips: i18n.t('MANUAL_ADD_TIP_1'),
              },
              {
                tips: i18n.t('MANUAL_ADD_TIP_2_IOS'),
              },
            ]
          );
        } else {
          tips.push(
            ...[
              {
                tips: i18n.t('INSTALL_THE_BULB'),
              },
              {
                tips: i18n.t('TURN_ON_BULB'),
              },
            ]
          );
        }
      } else {
        (configData.content || []).forEach((item) => {
          tips.push({
            tips: productI18n(
              item.text || item.title,
              model.productConfig,
              null
            ),
            image: item.image,
          });
        });
      }

      if (model.type === networkConfigTypes.TNetworkConfigTypeSoftAp) {
        const name = `${model.productConfig.softAPSSIDPrefix}${model.productConfig.notSoftAPSSIDSuffix ? '' : 'XXX'}`;
        tips.push(
          ...[
            {
              renderBox: () => (
                <View>
                  <Text style={styles.tipBox}>
                    {i18n.t('MANUAL_ADD_TIP_3', { name })}
                  </Text>
                  <SubTitle productConfig={model.productConfig} name={name} />
                </View>
              ),
            },
          ]
        );
      }
      return tips;
    }, [model, styles])

    return (
      <View style={{ flex: 1, flexDirection: 'column', width: '100%' }} className='centerFlex'>
        <FlexScrollView id={`${model.type}-tipList`}>
          <Steps data={getTips} />
        </FlexScrollView>
        {resetTips}
      </View >
    );
  }
);

export default Tips;
